<template>
  <Modal
    ref="modal"
    title="审核"
    width="600px"
  >
    <template #reference>
      <slot />
    </template>
    <el-form
      ref="form"
      label-width="100px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="发票号码"
        prop="invoiceNum"
      >
        <el-input
          v-model.trim="form.invoiceNum"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        label="发票代码"
        prop="invoiceCode"
      >
        <el-input
          v-model.trim="form.invoiceCode"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        label="收件人"
        prop="mailReceiver"
      >
        <el-input
          :value="detail.mailReceiver"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="联系电话"
        prop="mailPhone"
      >
        <el-input
          :value="detail.mailPhone"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="收件地址"
        prop="mailAddress"
      >
        <el-input
          :value="detail.mailAddress"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="快递单号"
        prop="mailExpressNo"
      >
        <el-input
          v-model.trim="form.mailExpressNo"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="text-center">
        <el-button
          type="primary"
          @click="handleSave"
        >
          确定
        </el-button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { invoiceAudit } from '@/api/invoice'
import { mapGetters } from 'vuex'
import { isSuccess } from '@/utils/common'
export default {
    components: {
        Modal: () => import('@/components/Modal'),
    },
    data() {
        return {
            form: {},
            rules: {
                invoiceNum: [{ required: true, message: '必填' }],
                invoiceCode: [{ required: true, message: '必填' }],
                mailExpressNo: [{ required: true, message: '必填' }],
            },
        }
    },
    computed: {
        ...mapGetters({
            detail: 'invoice/detail',
        }),
    },
    methods: {
        show() {
            this.$refs.modal.show()
        },
        // 确定
        async handleSave() {
            const valid = await this.$refs.form.validate()
            if (!valid) {
                return
            }
            const res = await invoiceAudit({
                id: this.detail.id,
                state: 'pass',
                ...this.form,
            })
            if (isSuccess(res)) {
                this.$message.success('审核成功')
                this.$refs.modal.hide()
                this.$store.dispatch('invoice/list')
            }
        },
    },
}
</script>